import React, { useState } from "react";
import { Form, Input, Button, Row, Col } from "antd";
import useCloseLoadingOnMount from "../../../utils/hook/useCloseLoadingOnMount";
import ComponentHeader from "../../../components/Page/ComponentHeader";
import businesssApi from "../../../apis/businesssApi";
import { promptResult2 } from "../../../utils/common";

const BusinessAdd = () => {
  useCloseLoadingOnMount();
  const [form] = Form.useForm();
  const [lodingBtn, setLoadingBtn] = useState(false);

  const onFinish = async (values) => {
    promptResult2(businesssApi.addBusinesss(values), setLoadingBtn);
  };

  return (
    <div className="body-container1">
      <ComponentHeader title="商家添加" marginBottom />
      <Form
        form={form}
        layout="vertical"
        onFinish={onFinish}
        initialValues={{
          isActive: true,
        }}
      >
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item
              label="店铺名称"
              name="name"
              rules={[{ required: true, message: "请输入店铺名称" }]}
            >
              <Input placeholder="请输入店铺名称" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="微信号"
              name="openId"
              rules={[{ required: true, message: "请输入微信号" }]}
            >
              <Input placeholder="请输入微信号" />
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={24}>
          <Col span={12}>
            <Form.Item
              label="店主姓名"
              name="managerName"
              rules={[{ required: true, message: "请输入店主姓名" }]}
            >
              <Input placeholder="请输入店主姓名" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="电话"
              name="phone"
              rules={[
                { required: true, message: "请输入电话" },
                { min: 11, max: 11, message: "电话号码应该为11位" },
              ]}
            >
              <Input placeholder="请输入电话" maxLength={11} />
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={24}>
          <Col span={12}>
            <Form.Item
              label="密码"
              name="password"
              rules={[{ required: true, message: "请输入密码" }]}
            >
              <Input.Password placeholder="请输入密码" />
            </Form.Item>
          </Col>
          <Col span={12}></Col>
        </Row>

        <Form.Item>
          <Button
            type="primary"
            loading={lodingBtn}
            htmlType="submit"
            style={{ width: 120 }}
          >
            提交
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default BusinessAdd;
